<template>
  <view class="max_box">
    <view class="select_box">
      <view class="left">
        <uni-icons type="shop-filled" color="#de4141" size="36rpx"></uni-icons>
        当前门店
      </view>
      <view class="shop_show">{{ centerData.text }}</view>
      <view class="switch_btn" @click="goCompanyService">切换<uni-icons type="forward" size="40rpx"></uni-icons>
      </view>
    </view>
    <view class="banner_box">
      <image class="img" mode="aspectFit" src="https://www.kamlung.net/images/other/service_support.png"></image>
    </view>
    <view class="slogan"> 添加Ta的企业微信，开始您的专属服务！ </view>
    <view class="info_box" :key="item.id" @click="addServise(item)" v-for="(item, index) in serviceList">
      <view class="info_item" :class="{ noborder: index !== 0 }">
        <view class="avatar">
          <image lazy-load class="img" mode="aspectFill" :src="`${baseUrl}/images/audi/service/${item.avatar_url}`">
          </image>
        </view>
        <view class="info">
          <view class="row"> {{ item.name }}--{{ item.company_name }} </view>
          <view class="row department">{{ item.department }}</view>
          <view class="row">{{ filterAddress(item.company_id) }}</view>
        </view>
        <view class="icon">
          <uni-icons size="68rpx" color="#de4141" type="personadd-filled"></uni-icons>
        </view>
      </view>
    </view>
    <u-empty mode="search" v-if="!serviceList.length" icon="https://www.kamlung.net/images/other/search1.png">
    </u-empty>
    <u-popup round="5" closeable :show="show" mode="center" bgColor="#f5f6f8" @close="show = false"
      :safeAreaInsetBottom="false">
      <view class="popup_inner">
        <!-- 客服名片组件 -->
        <PosterCanvas ref="mycanvas" :posInfo="posInfo"></PosterCanvas>
      </view>
    </u-popup>
    <view style="heigth: 40rpx"></view>
  </view>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import { curserviceList } from '@/API/reqData'
import { location } from '@/mixins/location'
export default {
  mixins: [location],
  data() {
    return {
      // 基础路径
      baseUrl: this.$baseUrl,
      serviceInfo: {},
      currentShop: '',
      serviceList: [],
      qyeryParam: {
        page: 1,
        pageSize: 10,
        brand_id: '',
        company_id: '',
        state: '1'
      },
      value: 0,
      // 公司列表
      companyList: [],
      // 公司列表请求参数
      companyListParam: {
        page: 1,
        brand_id: '',
        region_id: 1,
        pageSize: 10
      },
      index: 0,
      centerData: {},
      // 下面是海报
      show: false,
      posInfo: {}
    }
  },
  onLoad() {
    // 混合分享信息
    this.shareMixin.title = `客服列表`
    this.shareMixin.path = `/pages/Service/ServiceList`
    let { brand_id } = this.brandInfo
    this.qyeryParam.brand_id = brand_id
    this.companyListParam.brand_id = brand_id
    // 获取定位
    if (!Object.keys(this.latLog).length) {
      this.getLocation()
    }
  },
  onShow() {
    this.centerData = JSON.parse(uni.getStorageSync('oneCenters') || '{}')
    if (this.qyeryParam.company_id !== this.centerData.id) {
      this.qyeryParam.company_id = this.centerData.id
      this.getCurserviceList()
    }
    console.log(this.centerData)
  },
  methods: {
    async getCurserviceList() {
      const {
        data: { data }
      } = await curserviceList(this.qyeryParam)
      this.serviceList = data
    },
    filterAddress(i) {
      return this.centers.find(item => item.id === i)?.address
    },
    goCompanyService() {
      uni.navigateTo({ url: '/pages/Service/companyService' })
    },
    ...mapMutations(['saveCenters', 'saveLatLog']),
    // 下面是海报
    addServise(item) {
      this.serviceInfo = item
      this.canvasShow()
      setTimeout(() => {
        this.$refs.mycanvas.canvasGet()
      }, 400)
      this.show = true
    },
    canvasShow() {
      let {
        name,
        qyQr_url,
        department,
        avatar_url,
        company_name
      } = this.serviceInfo
      let baseUrl = `${this.baseUrl}/images/audi/service/` // 头像
      this.posInfo = {
        textHead: `${name}`,
        textRank: `@${company_name}`,
        imageBody: `${baseUrl}${qyQr_url}`,
        imageHead: `${baseUrl}${avatar_url}`,
        titleRank: `您好,我是${company_name}的${department}`
      }
      let tempTimeOut = setTimeout(() => {
        this.$refs.mycanvas.init() //绘制画布
        clearTimeout(tempTimeOut)
      }, 80)
    }
  },
  computed: {
    ...mapState(['carSeris', 'centers', 'latLog', 'brandInfo',])
  }
}
</script>

<style lang="scss" scoped>
.max_box {
  margin-top: 150rpx;

  .select_box {
    width: 100%;
    height: 57px;
    // margin: 20rpx 0;
    padding: 10rpx 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    position: fixed;
    left: 0;
    top: 0;

    .left {
      padding: 0 8rpx;
    }

    .shop_show {
      flex: 1;
      // border: 1px solid #eee;
      padding: 0 10rpx;
      text-align: center;
    }

    .switch_btn {
      font-size: 13px;
      display: flex;
      width: 60px;
      align-items: center;
      justify-content: center;
    }

    .right_select {
      flex: 1;
    }
  }

  // 广告
  .banner_box {
    width: 75vw;
    margin: 0 auto;
    height: 37.5vw;

    .img {
      width: 100%;
      height: 100%;
    }
  }

  // 标语
  .slogan {
    width: 80%;
    border: 1px solid #eee;
    text-align: center;
    padding: 20rpx 30rpx;
    margin: 30rpx auto;
    box-shadow: $theme-shadow;
    border-radius: 12rpx;
  }

  .info_box {
    margin: 20rpx 40rpx;

    .info_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;
      padding: 20rpx 10rpx;
      &.noborder {
        border-top: 1px solid #eee;
      }
      .avatar {
        width: 140rpx;
        height: 140rpx;
        overflow: hidden;
        border-radius: 12rpx;

        .img {
          width: 100%;
          height: 100%;
        }
      }

      .info {
        flex: 1;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        padding: 0 20rpx;
        font-size: 26rpx;
        height: 100%;

        .row {
          line-height: 40rpx;
          font-weight: 500;
        }
        .department {
          color: #19b927;
        }
      }
    }

    .icon {
      display: flex;
      flex-direction: column;
      width: 120rpx;
      height: 120rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24rpx;
    }
  }
}
.popup_inner {
  padding: 50rpx 40rpx 20rpx 40rpx;
}
</style>
